前言

在今天的任務中，我將專注在處理待辦事項的外觀，主要聚焦在HTML架構和CSS樣式的編寫。

HTML與CSS的調整

首先，我進行了一些調整，以下是我做的修改。

調整header、main和aside的樣式

我調整了header、main和aside的背景樣式，同時移除邊框。
為了提高main的可視性，我為header和aside增添backgoround-color以及color屬性。

header {
  width: 100%;
  padding: 1rem 0;
  position: relative;
  background-color: #333;
  color: white;
  text-align: center;
  transition: all 0.5s ease-in-out;
}

aside {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #333;
  color: #fff;
  overflow-x: hidden;
  transition: all 0.5s ease-in-out;
}

同時，我統一所有按鈕的樣式，讓它們看起來一致。

button {
  border: none;
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

待辦事項清單

HTML結構

接下來，我將對待辦事項清單的HTML進行設計。

我在主要的<main>區塊內添加兩個<section>元素，一個用於輸入待辦事項，另一個則用於顯示待辦事項清單。

以下是待辦事項清單部分的HTML：

<section class="input-container">
  <form action="" id="todoForm">
    <input
      type="text"
      name="inputText"
      id="inputText"
      placeholder="寫些什麼吧......"
    />
    <button id="addButton">&plus;</button>
  </form>
</section>

<section class="todolist-container"></section>

為了方便調整CSS樣式，我在'todolist-container'中加入一些測試用的待辦事項項目。

<div class="todolist-item">
    <input type="checkbox" name="checkbox" id="checkbox" />
    <p class="text-area">買牛奶</p>
    <button class="deleteButton">&times;</button>
</div>
<div class="todolist-item">
    <input
        type="checkbox"
        name="checkbox"
        id="checkbox"
    />
    <p class="text-area">開會</p>
    <button class="deleteButton">&times;</button>
</div>

CSS樣式

接著，開始對待辦事項清單設計CSS樣式。

待辦事項輸入區塊的樣式：
我使用Flex容器，令表單內的元素置中對齊。

main .input-container #todoForm {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.5rem;
  padding: 1rem;
}

我針對表單中的<input>使用'flex-grow'，讓輸入框能夠自動擴展填滿剩餘空間。

main .input-container #todoForm input[type=text] {
  flex-grow: 1;
  padding: 0.5rem;
  border: none;
  border-bottom: 1px solid gray;
  background-color: #f4f4f4;
}

待辦事項項目的樣式

我將todolist-container變成Flex容器，以便將內部所有的待辦事項項目置中對齊。

main .todolist-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.5rem 0;
}

同時，我對todolist-item內的元素進行樣式設定。首先，把它變成Flex容器，然後設置內外距，並使<p>元素填滿剩餘空間。

main .todolist-container .todolist-item {
  width: 80%;
  display: flex;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  background-color: #fff;
}
main .todolist-container .todolist-item input[type="checkbox"] {
  margin: 0 0.5rem;
}
main .todolist-container .todolist-item .text-area {
  flex-grow: 1;
}
main .todolist-container .todolist-item .deleteButton {
  margin: 0 0.5rem;
  padding: 0.2rem 0.5rem;
}

修復小bug

在適應性設計時，我發現header中的按鈕位置偏移了一些，為了解決這個問題，我在header樣式中添加了position: relative;。
它可以使按鈕相對於header去進行定位。

現在，我們已經完成了待辦事項清單的HTML和CSS設計，明天會處理JavaScript的部分。